
<script>
import * as d3 from 'd3';
const dataset = [[100,10],[10,80],[150,18],[200,110],[25,15],[30,20]];
//设定画布宽度
var width = 300;
//画布高度
var height = 200;
var magnification = 1;
export default{
    name: 'cus-scatter',
    template: '<div></div>',
    mounted(){
        const svg = d3.select(this.$el)
                 .append("svg")
                 .attr("width",width)
                 .attr("height",height);
        var circle1 = svg.selectAll("circle")
                    .data(dataset)
                    .enter()
                    .append("circle")
        .attr("cx", function (d,i) {
            return d[0]*magnification;
        })
        .attr("cy", function (d,i) {
            return height - d[1]*magnification;
        })
        .attr("r", 5)
        .style("fill","yellow");
         //在原来的基础上继续绘制圆（渐变效果）
        var circles = svg.selectAll("circle1")
                 .data(dataset)
                 .enter()
                 .append("circle");   
        //为申明的圆集设置参数
        //定义圆心x坐标
        circles.attr("cx",function (d,i) {
            console.log('i',i);
            // 
            return d[0]*magnification;
        })
        //定义圆心y坐标
        .attr("cy",function (d,i) {
            return height - d[1]*magnification;
        })
        //设置圆的半径
        .attr("r",function (d) {
            return 5;
        })
        //设置圆的颜色
        .attr("fill", "yellow")
        //补全第一次的效果
         circles.transition()
                    .duration(750)
                    .attr('r',15)
                    .attr("opacity",0.0)
                    .style("fill","yellow")
                    .transition()
                    .attr('r', 5)
                    .attr("opacity",1.0)
                    .duration(0)

        setInterval(function(){
            circles.transition()
                    .duration(1500)
                    .attr('r',15)
                    .attr("opacity",0.0)
                    .style("fill","yellow")
                    .transition()
                    .attr('r', 5)
                    .attr("opacity",1.0)
                    .duration(0)
    
            },1500)
        }   
}
</script>
<style scoped>

svg{
  margin: 25px;
}
 
</style>